<template>
  <div id="bottom" class="equipment-horizontal-container">
    <div
        ref="scrollContainer"
        class="equipment-horizontal"
        @mouseenter="pauseScroll"
        @mouseleave="resumeScroll"
    >
      <div
          v-for="(equip, index) in displayedEquipment"
          :key="`${index}-${equip.name}`"
          class="equipment-item"
          :class="getStatusClass(equip.status)"
      >
        <div class="item-corner tl"></div>
        <div class="item-corner tr"></div>
        <div class="item-corner bl"></div>
        <div class="item-corner br"></div>

        <div class="item-icon">
          <i :class="equip.icon"></i>
        </div>

        <div class="item-content">
          <div class="item-name">{{ equip.name }}</div>
          <div class="item-status">
            <span class="status-indicator" :class="getStatusClass(equip.status)"></span>
            {{ statusText[equip.status] }}
          </div>
          <div class="item-meta">
            <div>检: {{ formatMaintenanceDate(equip.lastMaintenance) }}</div>
            <div>运: {{ equip.runtimeHours }}h</div>
          </div>
        </div>

        <div class="item-glow"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'

interface Equipment {
  name: string
  icon: string
  status: 'normal' | 'warning' | 'error' | 'maintenance'
  lastMaintenance: string
  runtimeHours: number
}

const scrollContainer = ref<HTMLDivElement | null>(null)
const scrollPosition = ref(0)
const scrollInterval = ref<NodeJS.Timeout | null>(null)
const isScrollingPaused = ref(false)

const statusText = {
  normal: '正常',
  warning: '警告',
  error: '异常',
  maintenance: '检修'
}

const equipmentList: Equipment[] = [
  {
    name: '真空熔炼炉',
    icon: 'icon-gear',
    status: 'normal',
    lastMaintenance: '2023-05-15',
    runtimeHours: 2456
  },
  {
    name: '挤压机',
    icon: 'icon-wire',
    status: 'warning',
    lastMaintenance: '2023-06-20',
    runtimeHours: 1892
  },
  {
    name: '退火炉',
    icon: 'icon-extrude',
    status: 'normal',
    lastMaintenance: '2023-07-10',
    runtimeHours: 3210
  },
  {
    name: '绞线机',
    icon: 'icon-furnace',
    status: 'error',
    lastMaintenance: '2023-04-05',
    runtimeHours: 4125
  },
  {
    name: '微拉机',
    icon: 'icon-melt',
    status: 'maintenance',
    lastMaintenance: '2023-08-01',
    runtimeHours: 2876
  },
]

// 创建双倍列表用于无缝滚动
const displayedEquipment = computed(() => [...equipmentList, ...equipmentList])

const formatMaintenanceDate = (dateStr: string): string => {
  const [year, month, day] = dateStr.split('-')
  return `${month}/${day}`
}

const getStatusClass = (status: string): string => {
  return `status-${status}`
}

const startAutoScroll = () => {
  if (scrollInterval.value) clearInterval(scrollInterval.value)

  scrollInterval.value = setInterval(() => {
    if (isScrollingPaused.value || !scrollContainer.value) return

    scrollPosition.value += 1 // 调整滚动速度

    // 当滚动到一半时重置位置，实现无缝滚动
    if (scrollPosition.value >= scrollContainer.value.scrollWidth / 2) {
      scrollPosition.value = 0
    }

    scrollContainer.value.scrollLeft = scrollPosition.value
  }, 100) // 调整滚动平滑度
}

const pauseScroll = () => {
  isScrollingPaused.value = true
}

const resumeScroll = () => {
  isScrollingPaused.value = false
}

const updateRandomStatus = () => {
  const statuses: ('normal' | 'warning' | 'error' | 'maintenance')[] = ['normal', 'warning', 'error', 'maintenance']
  equipmentList.forEach(equip => {
    if (Math.random() > 0.7) {
      const newStatus = statuses[Math.floor(Math.random() * statuses.length)]
      equip.status = newStatus

      if (newStatus === 'maintenance') {
        const now = new Date()
        equip.lastMaintenance = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
      }
    }

    if (Math.random() > 0.5 && equip.status !== 'maintenance') {
      equip.runtimeHours += 1
    }
  })
}

onMounted(() => {
  startAutoScroll()
  // 模拟数据更新
  setInterval(updateRandomStatus, 100)
})

onUnmounted(() => {
  if (scrollInterval.value) {
    clearInterval(scrollInterval.value)
  }
})

// Expose to template
defineExpose({
  displayedEquipment,
  statusText,
  formatMaintenanceDate,
  getStatusClass,
  pauseScroll,
  resumeScroll
})
</script>

<style scoped>
.equipment-horizontal-container {
  width: 45%;
  padding: 10px 0;
  background: rgba(10, 20, 30, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(0, 162, 255, 0.3);
  overflow: hidden;
  position: absolute;
}

.equipment-horizontal {
  display: flex;
  gap: 12px;
  padding: 0 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.equipment-horizontal::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.equipment-item {
  flex: 0 0 140px;
  height: 80px;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
}

.equipment-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 10px rgba(0, 247, 255, 0.2);
}

.item-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #00f7ff;
}

.tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.item-icon {
  font-size: 20px;
  color: rgba(0, 247, 255, 0.6);
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
}

.item-status {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin: 3px 0;
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
}

.item-meta {
  font-size: 11px;
  color: #00a2ff;
  display: flex;
  justify-content: space-between;
}

.item-meta div {
  white-space: nowrap;
}

.item-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 247, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* 状态颜色 */
.status-normal {
  border-left: 2px solid #00ff00;
}

.status-normal .status-indicator {
  background-color: #00ff00;
  box-shadow: 0 0 5px #00ff00;
}

.status-warning {
  border-left: 2px solid #ffff00;
}

.status-warning .status-indicator {
  background-color: #ffff00;
  box-shadow: 0 0 5px #ffff00;
}

.status-error {
  border-left: 2px solid #ff0000;
}

.status-error .status-indicator {
  background-color: #ff0000;
  box-shadow: 0 0 5px #ff0000;
  animation: pulse 1s infinite;
}

.status-maintenance {
  border-left: 2px solid #ff9900;
}

.status-maintenance .status-indicator {
  background-color: #ff9900;
  box-shadow: 0 0 5px #ff9900;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 图标字体 */
.icon-gear:before {
  content: "⚙";
}

.icon-wire:before {
  content: "⛓";
}

.icon-extrude:before {
  content: "⇶";
}

.icon-furnace:before {
  content: "♨";
}

.icon-melt:before {
  content: "🔥";
}

.icon-twist:before {
  content: "∞";
}

.icon-anneal:before {
  content: "♨";
}
</style>
